<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Transpiler - Three.js Docs</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="../scripts/highlight.min.js"></script>
	<link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
	<link type="text/css" rel="stylesheet" href="../styles/page.css">
</head>
<body>
	<h1 translate="no">Transpiler</h1>
		<section>
			<header>
				<div class="class-description"><p>A class that transpiles shader code from one language into another.</p>
<p><code>Transpiler</code> can only be used to convert GLSL into TSL right now. It is intended
to support developers when they want to migrate their custom materials from the
current to the new node-based material system.</p></div>
			</header>
			<article>
				<h2 class="subsection-title">Import</h2>
				<p><span translate="no">Transpiler</span> is an addon, and must be imported explicitly, see <a href="https://threejs.org/manual/#en/installation" target="_blank" rel="noopener">Installation#Addons</a>.</p>
				<pre><code class="language-js">import Transpiler from 'three/addons/transpiler/Transpiler.js';</code></pre>
				<div class="container-overview">
					<h2>Constructor</h2>
					<h3 class="name name-method" id="Transpiler" translate="no">new <a href="#Transpiler">Transpiler</a><span class="signature">( decoder : <span class="param-type">GLSLDecoder</span>, encoder : <span class="param-type">TSLEncoder</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Constructs a new transpiler.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>decoder</strong>
									</td>
									<td class="description last">
										<p>The GLSL decoder.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>encoder</strong>
									</td>
									<td class="description last">
										<p>The TSL encoder.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<h2 class="subsection-title">Properties</h2>
				<div class="member">
					<h3 class="name" id="decoder" translate="no">.<a href="#decoder">decoder</a><span class="type-signature"> : GLSLDecoder</span> </h3>
					<div class="description">
						<p>The GLSL decoder. This component parse GLSL and produces
a language-independent AST for further processing.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="encoder" translate="no">.<a href="#encoder">encoder</a><span class="type-signature"> : TSLEncoder</span> </h3>
					<div class="description">
						<p>The TSL encoder. It takes the AST and emits TSL code.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="linker" translate="no">.<a href="#linker">linker</a><span class="type-signature"> : Linker</span> </h3>
					<div class="description">
						<p>The linker. It processes the AST and resolves
variable and function references, ensuring that all
dependencies are properly linked.</p>
					</div>
				</div>
				<h2 class="subsection-title">Methods</h2>
					<h3 class="name name-method" id="parse" translate="no">.<a href="#parse">parse</a><span class="signature">( source : <span class="param-type">string</span> )</span><span class="type-signature"> : string</span> </h3>
					<div class="method">
						<div class="description">
							<p>Parses the given GLSL source and returns TSL syntax.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>source</strong>
									</td>
									<td class="description last">
										<p>The GLSL source.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> The TSL code.</dt>
						</dl>
					</div>
				<h2 class="subsection-title">Source</h2>
				<p>
					<a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/transpiler/Transpiler.js" translate="no" target="_blank" rel="noopener">examples/jsm/transpiler/Transpiler.js</a>
				</p>
			</article>
		</section>
<script src="../scripts/linenumber.js"></script>
<script src="../scripts/page.js"></script>
</body>
</html>